<!--  -->
<template>
  <div class="es6"><h1>es6</h1></div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  created() {},
  mounted() {
    //   this.es()
    // this.ssorts();
    // this.Assigns();
    // this.Ergodic()
    // this.find();
    // this.jsonStr();
    // this.arrTogether();
    // this.objTogether();
    // this.OwnProperty();
    // this.ways();
    // this.baohan();
    // this.allMath();
    // this.Storage();
    // this.symbol();
    // this.setset();
    this.fAndSet();
  },
  methods: {
    //  排序
    es() {
      const arr = ["peach", "straw", "apple", "spork"];

      const stableSorting = (s1, s2) => {
        if (s1[0] < s2[0]) return -1;
        return 1;
      };
      console.log(arr.sort(stableSorting));
    },
    // sort排序
    ssorts() {
      const arr = [1, 12, 6543, 123, 61];
      console.log(
        arr.sort((a1, a2) => {
          return a1 - a2; //[1, 12, 61, 123, 6543]
        })
      );
    },
    // assign对象合并
    Assigns() {
      let arr = { a: 1, b: 10 };
      let arr2 = { c: 10, a: 11 };
      console.log(Object.assign(arr, arr2)); //{a: 11, b: 10, c: 10}
      console.log(`${JSON.stringify(arr)} ----- 原数组arr`); //{"a":11,"b":10,"c":10}
      console.log(`${JSON.stringify(arr2)} -----原数组arr2 `); //{"c":10,"a":11}
      //   合并后改变了原对象arr
    },
    // 属性遍历方法ES6
    Ergodic() {
      // 1.for ... in
      let arr = { a: 1, b: 123, c: "asd", d: "嘿嘿" };
      for (let x in arr) {
        console.log(x); //a,b,c,d
        console.log(arr[x]); //1,123,asd,嘿嘿
      }
      console.log(Object.keys(arr)); //['a', 'b', 'c', 'd']
    },
    // 常用api
    find() {
      let arr = [
        { id: "1", text: "第一个对象" },
        { id: "1", text: "第二个对象" },
        { id: "2", text: "第三个对象" },
      ];
      //   1.find返回第一个符合条件的对象
      let obj1 = arr.find((item) => item.id == "1");
      console.log("find=", obj1, arr); // {id: '1', text: '第一个对象'}  [{…}, {…}, {…}]
      //   2.filter返回所有符合条件的对象，并用数组包裹
      let obj2 = arr.filter((item) => item.id == "1");
      console.log("filter=", obj2, arr); //[{...},{...}]   [{…}, {…}, {…}]
      //   3.includes  返回true或者false
      let obj3 = arr.includes(1);
      console.log("include", obj3, arr); //false   [{…}, {…}, {…}]
      //   4.map  遍历并返回item
      let obj4 = arr.map((item) => item.id);
      console.log("map", obj4, arr); //['1', '1', '2']  [{…}, {…}, {…}]
      //   5.every 如果所有条件都符合返回true，有一个不符合就为false
      let obj5 = arr.every((item) => item.id == "1");
      console.log("every", obj5, arr); //false   [{…}, {…}, {…}]
      //   6.有一个条件符合就返回true，一个没有返回false
      let obj6 = arr.some((item) => item.id == "1");
      console.log("some", obj6, arr); //true  [{…}, {…}, {…}]
    },
    // json.stringify()序列化
    jsonStr() {
      let obj = { a: 1, address: "xian", sa: "陕西", sdss: "as" };
      let json1 = JSON.stringify(obj, ["address", "sdss"]);
      console.log(json1, typeof json1); //{"address":"xian","sdss":"as"} string
      // json.parse()序列化
      let json2 = JSON.parse(json1, (k, v) => {
        //k：键名，v：键值2
        console.log("key---" + k, "value---" + v); //key---address value---xian,key---sdss value---as,key--- value---[object Object]
        //可以写需要的条件，操作改变键名对应的键值
        if (k === "address") {
          return "啊啊啊"; //return改变键名为address的键值为啊啊啊
        }
        return v; //然后将键值return出去
      });
      console.log(json2, typeof json2); //{address: '啊啊啊', sdss: 'as'} 'object'
    },
    // 数组合并
    arrTogether() {
      // 1.concat()合并，不该改变原数组
      let a = [1, 2, 3],
        b = [4, 5, 6];
      let c = a.concat(b);
      console.log(c); //[1, 2, 3, 4, 5, 6]
      console.log(a); //[1,2,3]
      //   2.循环遍历
      let arr1 = ["a", "b"];
      let arr2 = ["c", "d", "e"];
      for (var i = 0; i < arr2.length; i++) {
        arr1.push(arr2[i]);
      }
      console.log(arr1); //['a','b','c','d','e']
      //   3.apply合并数组arr3和数组arr4,使用Array.prototype.push.apply(arr1,arr2)  or arr3.push.apply(arr3,arr4);
      let arr3 = ["哈哈", "嘿嘿"];
      let arr4 = ["喜喜", "呵呵", "哦哦"];
      //   方法1
      Array.prototype.push.apply(arr3, arr4);
      console.log(arr3); //['哈哈', '嘿嘿', '喜喜', '呵呵', '哦哦']
      //   方法2
      arr1.push.apply(arr3, arr4);
      console.log(arr3); //['哈哈', '嘿嘿', '喜喜', '呵呵', '哦哦']
    },
    // 对象合并
    objTogether() {
      // 1.遍历赋值
      // let obj1 = { a: 1 };
      // let obj2 = { b: 2, c: 3 };
      // for (var key in obj2) {
      //   console.log(obj2[key]); //2,3
      //   if (obj2.hasOwnProperty(key) === true) {
      //     console.log(obj2.hasOwnProperty(key)) //true
      //     obj1[key] = obj2[key];
      //   }
      // }
      // console.log(obj1); //{a: 1, b: 2, c: 3}

      // 2.Object.assign()可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。
      // Object.assign(x1,x2,...)传入两个对象，将第二个对象或后边多个对象合并进第一个对象。第一个对象原对象为深拷贝，合并后直接改变原对象结构，并不改变x2对象结构。
      let obj = { a: 1, b: 2 };
      let obj2 = { c: 3, d: 4 };
      let obj3 = { f: 5, j: 6 };
      // console.log(Object.assign(obj, obj2, obj3)); //{a: 1, b: 2, c: 3, d: 4,f:5,j:6}
      console.log(obj, obj2, obj3); //{a: 1, b: 2, c: 3, d: 4,f:5,j:6} ，{c:3,d:4},{f:5,j:6}
      // res为深拷贝，源对象obj也改变了
      var res = Object.assign(obj, obj2);
      console.log(res); //{a: 1, b: 2, c: 3, d: 4}
      console.log(obj); //{a: 1, b: 2, c: 3, d: 4}
    },
    // hasOwnProperty()属性
    OwnProperty() {
      // Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。
      // 1.判断自身属性是否存在
      // let o = new Object();
      // o.prop = "exists";
      // console.log(o); //{prop:'exists'}
      // function changeo() {
      //   o.newprop = o.prop; //{prop:'exists',newprop:'exists'}
      //   delete o.prop; //{prop:'exists'}
      // }
      // console.log(o.hasOwnProperty("prop")); //true  在调用changeo方法之前存在prop属性，所以返回true
      // changeo();
      // console.log(o.hasOwnProperty("prop")); //false  在调用changeo方法之后，由于方法中delete了prop属性，所以返回false

      // //2.判断自身属性与继承属性
      // function foo() {
      //   this.name = "foo";
      //   this.sayHi = function () {
      //     console.log("Say Hi");
      //   };
      // }
      // foo.prototype.sayByBy = function () {
      //   console.log("By By");
      // };
      // let open = new foo();
      // console.log(open.name); //foo
      // console.log(open.hasOwnProperty("name")); //true
      // console.log(open.hasOwnProperty("hasOwnProperty")); //false
      // console.log(open.hasOwnProperty("sayHi")); //true
      // console.log(open.hasOwnProperty("sayByBy")); //false
      // console.log("sayByBy" in open); //true

      // 3.遍历一个对象的所有自身属性
      var obj = { a: 1, b: 2 };
      var obj2 = { c: 3, a: 4 };
      for (var i in obj2) {
        if (obj.hasOwnProperty(i)) {
          console.log(`${i} Value: ` + obj[i]); //a Value: 1
        } else {
          console.log(i); //c
        }
      }
      // 简写
      for (var i in obj2) {
        console.log(obj?.[i]); //undefined，1
      }
    },
    //Object.keys()，Object.values()，Object.entries()
    ways() {
      let obj = { a: 1, b: 2 };
      let { keys, values, entries } = Object;
      // 1.Object.keys()——遍历键名
      // ES5 引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。

      for (var key of keys(obj)) {
        console.log(key); //a  b  c
      }
      // Object.keys
      console.log(Object.keys(obj)); //['a','b']

      // 2.Object.values()——遍历键值

      for (var key of values(obj)) {
        console.log(key); //
      }
      // Object.values
      console.log(Object.values(obj)); //[1,2]

      // 3.Object.entries()——遍历键值对
      for (var key of entries(obj)) {
        console.log(key);
      }
      // Object.entries
      console.log(Object.entries(obj)); // [Array[2],Array[2]]  //Array(2)->['a','1'] Array(2)->['b','2']
    },
    // includes
    baohan() {
      let arr = [1, 2, 3, 4, "a"];
      console.log(arr.includes("a")); //true
    },
    // 指数运算符
    allMath() {
      // 1.**
      console.log(2 ** 3); //2x2x2=8
      console.log(2 ** (2 ** 3)); //从右向左算，2的(2x2x2)次方，2的8次方=256
      let a = 1.5;
      console.log((a **= 3)); //1.5的3次方=3.375
      // 2.?.链判断运算符
      let obj = { a: 1, b: 2, c: 3 };
      // 判断属性是否存在于对象
      console.log(obj?.a); // 1  存在就直接取出value  或者obj?.['a']
      console.log(obj?.d); //undefined  不存在就返回undefined，不继续执行  或者obj?.['d']
      // 3.??判断Null
      const arr1 = null;
      const arr2 = undefined;
      const arr3 = false;
      const arr4 = 0;
      console.log(arr1 || "默认值"); //默认值
      console.log(arr2 || "默认值"); //默认值
      console.log(arr3 || "默认值"); //默认值
      console.log(arr4 || "默认值"); //默认值
      console.log(arr1 ?? "默认值"); //默认值
      console.log(arr2 ?? "默认值"); //默认值
      console.log(arr3 ?? "默认值"); //false
      console.log(arr4 ?? "默认值"); //0
    },
    // Storage
    Storage() {
      // sessionStorage存储
      sessionStorage.setItem("user_name", "云云");
      // localStorage存储
      let obj1 = { name: "芸芸转成字符串" };
      let obj2 = { name: "芸芸是个对象" };
      localStorage.setItem("user_name_string", JSON.stringify(obj1));
      localStorage.setItem("user_name_object", obj2);
      // sessionStorage从webStorage中读取数据
      console.log(sessionStorage.getItem("user_name") ? 1 : 0);
      // localStorage从webStorage中读取数据
      console.log(localStorage.getItem("user_name_string")); //"{"name":"芸芸转成字符串"}"
      console.log(localStorage.getItem("user_name_object")); //[object Object]
      //删除
      sessionStorage.removeItem("user_name"); //从sessionStorage从删除key为user_name的数据
      localStorage.removeItem("user_name_string"); //从localStorage删除key为user_name_string的数据
      //清空
      sessionStorage.clear(); //清空当前网站下sessionStorage所有数据
      localStorage.clear(); //清空当前网站下localStorage所有数据
      //获取当前网站下WebStorage数据的数量（有多少键值对）
      console.log(sessionStorage.length); //  1
      console.log(localStorage.length); //   2
    },
    // Symbol
    symbol() {
      //声明s1，s2，是两个Symbol值，如果不加参数，在控制台输出的就是Symbol()，可以给他们加上一个参数，用来区分。
      let s1 = Symbol("这是S1");
      let s2 = Symbol("这是S2");
      // console.log(s1, s2); //Symbol(这是S1) Symbol(这是S2)
      // console.log(s1.toString(), s2.toString()); //"Symbol(这是S1) Symbol(这是S2)"
      // console.log(typeof s1); //  Symbol
      // console.log(typeof s1.toString()); //string

      //如果Symbol的参数是一个对象，就会调用该对象的toString方法，将其转化为字符串，然后生成Symbol值，如果传入一个对象，输出的为Symbol([Object,Object])。想要输出的为字符串，在把对象塞进Symbol值之前将对象序列化为字符串（JSON.stringift(obj)），即Symbol(JSON.stringify(obj))
      const obj = {
        toString() {
          return "abc";
        },
      };
      const obj1 = {
        name: "芸芸",
        age: "18",
      };
      const sym = Symbol(obj);
      const sym2 = Symbol(obj1);
      const sym3 = Symbol(JSON.stringify(obj1));
      // console.log(sym); //Symbol(abc)
      // console.log(sym2); //Symbol([Object,Object])
      // console.log(sym3); //Symbol({"name":"芸芸","age":"18"})
    },
    //新的数据结构set
    setset() {
      //   //1.通过add()方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。
      //   const s = new Set();
      //   [1, 1, 2, 3, 4, 5, 5].forEach((it) => s.add(it));
      //   // console.log(s); //{1,2,3,4,5}
      //   //2.Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。
      //   // 数组去重
      //   let arr = [1, 1, 2, 2, 3, 3, 4];
      //   const set = new Set(arr);
      //   // console.log(set); //{1,2,3,4}
      //   // console.log(set.size); //4 （获取set的个数）
      //   let obj={name:"123",age:"12"}
      //   console.log(obj.isCount=true)
      //   console.log(obj)
    },
    //from 和 Set
    fAndSet() {
      //使用array和from实现数组去重
      let arr = [1, 2, 3, 4, 5];
      const items = new Set(arr);
      console.log(items, typeof items); //{1,2,3,4,5} , 'object'
      const array = Array.from(items);
      console.log(array, array instanceof Array); //[1, 2, 3, 4, 5] true
      console.log(array, Array.isArray(array)); //[1, 2, 3, 4, 5] tr
      //写进函数内
      function Quchong(arr) {
        return Array.from(new Set(arr));
      }
      console.log(Quchong(arr)); //[1,2,3,4,5]
    },
  },
};
</script>

<style lang='less' scoped>
.es6 {
  width: 100%;
  height: 100%;
}
</style>
